<div id="tb<?php echo $uniqid;?>">
    <table cellspacing="0" cellpadding="0">
        <tbody>
        <tr>
            <td colspan="5">
                <span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='all'?'selected':''"
                      @click="filter('all')"><span class="l-btn-text">全部</span></span>
                <span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='joined'?'selected':''"
                      @click="filter('joined')"><span class="l-btn-text">已参与</span></span>
                <span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='joineddefaultrule'?'selected':''"
                      @click="filter('joineddefaultrule')"><span class="l-btn-text">已参与默认规则</span></span>
                <span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='joinedselfrule'?'selected':''"
                      @click="filter('joinedselfrule')"><span class="l-btn-text">已参与独立规则</span></span>
                <span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='nojoin'?'selected':''"
                      @click="filter('nojoin')"><span class="l-btn-text">未参与</span></span>
            </td>
        </tr>
        <tr>
            <td>
                <a href="javascript:void(0);" onclick="selectAll();" class="l-btn l-btn-small l-btn-plain"><span
                        class="l-btn-left l-btn-icon-left"><i class="iconfont"></i><span class="l-btn-text">全选当前页</span></span></a>
                <a href="javascript:void(0);" onclick="clearChecked();" class="l-btn l-btn-small l-btn-plain"><span
                        class="l-btn-left l-btn-icon-left"><i class="iconfont"></i><span class="l-btn-text">取消已选</span></span></a>
            </td>
            <td>
                <div class="datagrid-btn-separator"></div>
            </td>
            <td>
                <a href="javascript:void(0);" onclick="bitchBepartake();" class="l-btn l-btn-small l-btn-plain"><span
                    class="l-btn-left l-btn-icon-left"><i class="iconfont"></i><span class="l-btn-text">批量参与</span></span></a>
                <a href="javascript:void(0);" onclick="bitchNopartake();" class="l-btn l-btn-small l-btn-plain"><span
                    class="l-btn-left l-btn-icon-left"><i class="iconfont"></i><span class="l-btn-text">批量不参与</span></span></a>
            </td>
            <td>
                <div class="datagrid-btn-separator"></div>
            </td>
            <td><a href="javascript:void(0);" onclick="cashbackgoodsReload();" class="l-btn l-btn-small l-btn-plain"><span
                    class="l-btn-left l-btn-icon-left"><i class="iconfont icon-shuaxin"></i><span class="l-btn-text">重载</span></span></a></td>
            <td><span style="line-height:30px;"></span>
                <input id="cashbackgoodskeywords" v-model="params.keywords" style="width:120px" placeholder="按ID、商品名搜索" type="text"
                                   class="easyui-input textbox"></td>
            <td><a href="javascript:void(0);" onclick="cashbackgoodsSearch();" class="l-btn l-btn-small l-btn-plain"><span
                    class="l-btn-left l-btn-icon-left"><i class="iconfont icon-sousuo"></i><span class="l-btn-text">查询</span></span></a></td>
        </tr>
        </tbody>
    </table>
</div>
<div class="con"  style="-moz-user-select:none;">
    <table id="cashbackgoods"></table>
</div>
<div id="cashbackgoodsDlg" class="easyui-dialog" style="width:840px; height:520px;" title="信息框" closed="true"></div>
<script>
    var datagridTable = $("#cashbackgoods");
    var CashbackgoodsListVm = new Vue({
        el: '#tb<?php echo $uniqid;?>',
        data: {
            params: {
                keywords: '',
                mode: 'all'
            },
            initLoad:false,
        },
        filters: {
            formatDate(nS){
                return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
            }
        },
        methods: {
            init: function () {
                cashbackgoodsLoad();
            },
            filter(mode) {
                this.params.mode = mode;
                this.init();
            },
        }
    });
    var clearChecked = function (){
        datagridTable.datagrid('clearChecked');
        datagridTable.datagrid('clearSelections');
    }
    var selectAll = function (){
        datagridTable.datagrid('selectAll');
        datagridTable.datagrid('checkAll');
    }
    var bonus = function (id) {
        let rowId = id || (datagridTable.datagrid('getSelected') && datagridTable.datagrid('getSelected').id);
        if (rowId) {
            $("#cashbackgoodsDlg").dialog({
                title: '设置返现比例',
                closed: false,
                width: 940,
                height: 560,
                cache: false,
                href: '/admin/cashbackgoods/setbackinfo?id=' + rowId,
                modal: true,
                buttons: [{
                    text:'保存',
                    id:'setbackinfosubmit',
                    iconCls:'icon-ok',
                },{
                    text: '关闭',
                    iconCls: 'icon-no',
                    handler: function () {
                        $("#cashbackgoodsDlg").dialog('close');
                    }
                }]
            });
        } else {
            $.messager.alert('提示', '请先选择要编辑的记录！', 'warning');
        }
        event.stopPropagation();
    };
    var bepartake = function (id) {
        let rowId = id || (datagridTable.datagrid('getSelections') && datagridTable.datagrid('getSelections').length>0);
        if (rowId) {
            $.post('/admin/cashbackgoods/setgoodsup', {id:rowId}, function(data){
                if(parseInt(data.ret)===0){
                    $.messager.show({
                        title:'提示',
                        msg:data.msg,
                        timeout:3000,
                        showType:'slide'
                    });
                    cashbackgoodsReload();
                }else{
                    $.messager.alert('提示',data.msg,'warning');
                }
            },'json');
        } else {
            $.messager.alert('提示', '请先选择要编辑的行！', 'warning');
        }
        event.stopPropagation();
    };
    var bitchBepartake = function () {
        let rowId = datagridTable.datagrid('getSelections');
        if (rowId.length>0) {
            let ids = [];
            rowId.forEach((it)=>{
                ids.push(it.id);
            });
            $.post('/admin/cashbackgoods/bitchsetgoodsup', {ids:ids}, function(data){
                if(parseInt(data.ret)===0){
                    $.messager.show({
                        title:'提示',
                        msg:data.msg,
                        timeout:3000,
                        showType:'slide'
                    });
                    cashbackgoodsReload();
                }else{
                    $.messager.alert('提示',data.msg,'warning');
                }
            },'json');
        } else {
            $.messager.alert('提示', '请先选择要编辑的行！', 'warning');
        }
        event.stopPropagation();
    };
    var nopartake = function (id) {
        let rowId = id || (datagridTable.datagrid('getSelections') && datagridTable.datagrid('getSelections').length>0);
        if (rowId) {
            $.post('/admin/cashbackgoods/setgoodsdown', {id:rowId}, function(data){
                if(parseInt(data.ret)===0){
                    $.messager.show({
                        title:'提示',
                        msg:data.msg,
                        timeout:3000,
                        showType:'slide'
                    });
                    cashbackgoodsReload();
                }else{
                    $.messager.alert('提示',data.msg,'warning');
                }
            },'json');
        } else {
            $.messager.alert('提示', '请先选择要编辑的行！', 'warning');
        }
        event.stopPropagation();
    };
    var bitchNopartake = function () {
        let rowId = datagridTable.datagrid('getSelections');
        if (rowId.length>0) {
            let ids = [];
            rowId.forEach((it)=>{
                ids.push(it.id);
            });
            $.post('/admin/cashbackgoods/bitchsetgoodsdown', {ids:ids}, function(data){
                if(parseInt(data.ret)===0){
                    $.messager.show({
                        title:'提示',
                        msg:data.msg,
                        timeout:3000,
                        showType:'slide'
                    });
                    cashbackgoodsReload();
                }else{
                    $.messager.alert('提示',data.msg,'warning');
                }
            },'json');
        } else {
            $.messager.alert('提示', '请先选择要编辑的行！', 'warning');
        }
        event.stopPropagation();
    };
    var cashbackgoodsReload = function () {
        datagridTable.datagrid('reload');
    };
    var cashbackgoodsLoad = function () {
        datagridTable.datagrid('load', CashbackgoodsListVm.params);
    };
    var cashbackgoodsSearch = function () {
        var height = $(window).height() - $(".top").height() - 46;//表格高度
        var width = $(window).width() - $(".leftmenu").width() - 8;
        datagridTable.datagrid({
            title: '返现商品列表',
            width: width,
            height: height,//高度
            singleSelect: false,//如果为true，则只允许选择一行
            striped: true,//是否显示斑马线效果。
            rownumbers: false,//如果为true，则显示一个行号列。
            pagination: true,//是否显示分页
            pageSize: 15,
            pageList: [15, 30, 40, 50],
            method: 'post',
            sortName: 'weigh',
            sortOrder: 'desc',
            url: '/admin/cashbackgoods/index',
            queryParams: CashbackgoodsListVm.params,
            fitColumns: true,//真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。
            nowrap: false,//如果为true，则在同一行中显示数据。设置为true可以提高加载性能。 是否换行
            selectOnCheck: true,
            checkOnSelect: true,
            idField: 'id',
            toolbar: '#tb<?php echo $uniqid;?>',
            rowStyler: function (index, row) {
                if (row.status == '失效') {
                    return 'color:#F00;font-style:italic;';
                }
            },
            columns: [[
                {field: 'id', checkbox: true, width: fixWidth(5)},
                {
                    field: 'ids',
                    title: 'ID',
                    width: fixWidth(5),
                    formatter: function (value, rowData, rowIndex) {
                        return rowData.id;
                    }
                },
                {
                    field: 'title', title: '商品信息', width: fixWidth(50), formatter: function (value, rowData, rowIndex) {
                        return '<div style="display: flex;align-items: center;">' +
                            '<img src="' + rowData.image + '?imageView2/1/w/60/h/60" style="height:30px;width:30px;border-radius: 5px;border:#dfdfdf 1px solid;">'+
                            '<div>' + value + "<br>" + (rowData.is_sku ? '（多规格）' : '') + '</div></div>';
                    }
                },
                {field: 'price', title: '价格', width: fixWidth(15), align:'center'},
                {
                    field: 'option', title: '操作', align:'center', width: fixWidth(25), formatter: function (value, rowData, rowIndex) {
                        let buttons = '<div class="table"><span class="l-btn l-btn-small color9 table" onclick="bonus(\'' + rowData.id + '\')"><span class="l-btn-text">设置返现</span></span>';
                        if (rowData.goods_id>0 && parseInt(rowData.status)===1) {
                            buttons += '<span class="l-btn l-btn-small color9 table" onclick="nopartake(\'' + rowData.id + '\')"><span class="l-btn-text" style="color: red">不参与</span></span>';
                        }else if (rowData.goods_id>0 && parseInt(rowData.status)===0) {
                            buttons += '<span class="l-btn l-btn-small color9 table" onclick="bonus(\'' + rowData.id + '\')"><span class="l-btn-text">参与</span></span>';
                        }else{
                            buttons += '<span class="l-btn l-btn-small color9 table" onclick="bepartake(\'' + rowData.id + '\')"><span class="l-btn-text">参与</span></span>';
                        }
                        return buttons + '</div>';
                    }
                },
            ]],
        });
    };
    cashbackgoodsSearch();
    onDatagridResize("#cashbackgoods");
</script>
<style>
    .l-btn-plain{
        border: rgba(0,0,0,0) 1px solid;
    }
    .datagrid-row td{
        padding-top: 10px;
        padding-bottom: 10px;
        line-height: 1.8em !important;
    }

    .datagrid-toolbar .selected {
        color: #f1f1f1;
        background: #1065a7;
        border: 1px solid #f0f0f0;
    }
    .datagrid-body-row td{
        line-height: 1.8em !important;
    }
</style>